<template>
  <div class="energize">
    <div class="slogan-list">
      <div class="slogan-list-item">
        <div class="slogan-title">赋能</div>
        <div class="slogan-subhead">Empower</div>
        <div class="slogan-summary">拓宽生活边界</div>
        <div class="slogan-summary">提高生活质量</div>
        <div class="slogan-summary">丰富生命厚度</div>
        <div class="slogan-description">Broaden life boundaries</div>
        <div class="slogan-description">Improve life quality</div>
        <div class="slogan-description">Enrich life thickness</div>
      </div>
      <div class="slogan-list-item">
        <div class="slogan-title">创新</div>
        <div class="slogan-subhead">Innovation</div>
        <div class="slogan-summary">开放互联</div>
        <div class="slogan-summary">深化维度</div>
        <div class="slogan-summary">细分切入</div>
        <div class="slogan-description">Open to interconnection</div>
        <div class="slogan-description">Deepen dimensions</div>
        <div class="slogan-description">Subdivided into</div>
      </div>
      <div class="slogan-list-item">
        <div class="slogan-title">诠释</div>
        <div class="slogan-subhead">Interpretation</div>
        <div class="slogan-summary">满足需求</div>
        <div class="slogan-summary">品质先行</div>
        <div class="slogan-summary">优质生活</div>
        <div class="slogan-description">Demands meet</div>
        <div class="slogan-description">Quality first</div>
        <div class="slogan-description">High quality life</div>
      </div>
      <div class="slogan-list-item">
        <div class="slogan-title">体验</div>
        <div class="slogan-subhead">Experience</div>
        <div class="slogan-summary">用户本位</div>
        <div class="slogan-summary">情感共鸣</div>
        <div class="slogan-summary">品味一致</div>
        <div class="slogan-description">User oriented</div>
        <div class="slogan-description">Emotional empathy</div>
        <div class="slogan-description">Consistent taste</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeVision'
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  .energize
    background-image url('../../../assets/home/04.jpg')
    background-size cover
    background-position center
    .slogan-list
      width 80%
      margin 0.1rem auto
      padding-top 10%
      padding-bottom 20%
      display flex
      flex-direction row
      justify-content space-between
      flex-wrap wrap
      .slogan-list-item
        margin-top:0.5rem
        width 40%
        background: #e08510;
        font-size: 0.1rem;
        color:#fff;
        padding-bottom: 0.64rem;
        .slogan-title
          font-size:0.4rem;
          line-height: 1rem;
          margin-top:0.4rem;
          margin-left:0.2rem;
        .slogan-subhead
          font-size:0.2rem;
          margin-bottom:0.4rem;
          margin-left:0.2rem;
        .slogan-summary
          font-size:0.2rem;
          line-height: 0.4rem;
          margin-left:0.2rem;
        .slogan-description
          line-height: 0.3rem;
          margin-left:0.2rem;
          color: #eff3da;
</style>
